<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8">
<title>链路监视</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css">
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN PAGE STYLES -->
<link href="assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE STYLES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
<link href="assets/global/css/plugins.css" rel="stylesheet" type="text/css">
<link href="assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
<link href="assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
<link href="assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
<style>
	.link-active{
		background-color: #DFF0CA;
	}
	.br{
		border-right: 4px solid #9eacb4; height: 40px;
	}
	.bl{
		border-left: 4px solid #9eacb4; height: 40px;
	}
	[v-cloak]{
		display: none;
	}
</style>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico">

</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>


<!-- BEGIN PAGE CONTAINER -->
<div id="app">
	<div class="page-container" v-cloak>
		<!-- BEGIN PAGE CONTENT -->
		<div class="page-content">
			<div class="container">
				<!-- BEGIN PAGE CONTENT INNER -->
				<div class="row margin-top-10">
					<div class="col-md-9 col-sm-9">
						<div class="">
							<!-- BEGIN PORTLET-->
						<div class="portlet light">
							<div class="portlet-title">
								<div class="caption caption-md">
									<i class="icon-bar-chart theme-font hide"></i>
									<span class="caption-subject theme-font bold uppercase" v-text="selectedLink + '链路图'"></span>
								</div>
							</div>
							<div class="portlet-body">
								<!-- <div class="layer">
									<div class="line-box">
										<div class="item-box line-left">
											<div class="item">1</div>
											<div class="item">2</div>
											<div class="item">3</div>
											<div class="item">4</div>
										</div>
										<div class="dis-box dis-right">
											<div class="dis"></div>
										</div>
									</div>
									<div class="line-box">
										<div class="item-box line-right">
											<div class="item">1</div>
											<div class="item">2</div>
											<div class="item">3</div>
											<div class="item">4</div>
										</div>
										<div class="dis-box dis-left">
											<div class="dis"></div>
										</div>
									</div>
								</div> -->
								<table>
									<template v-for="(el,idx) in nodes">
									<tr>
										<template v-for="(sub,sid) in el">
										<td v-if="sub.firstNode">
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-cube icon-font"></i>
												</div>
												<div class="theme-font font-xs">
													<span v-text="sub.nodeName"></span>
													<br>
													<span v-text="'监测站：' + sub.stationPort + '#端口'"></span>										
												</div>
											</div>
										</td>
										<td v-if="!sub.firstNode && !sub.empty">
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-map-marker icon-font"></i>
												</div>
												<div class="theme-font font-xs">
													<span v-text="sub.nodeType + ':' + sub.codeInfo"></span>
											<br>
											<span v-text="'距离：' + sub.distance"></span>									
												</div>
											</div>
										</td>
										<td v-if="sub.empty"></td>
										<td>
											<p v-show="(sid + 1) % 4 != 0 && !el[sid + 1]['empty']" class="line">通信光缆</p>
										</td>
										</template>
										<!-- <td>
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-map-marker icon-font"></i>
												</div>
												<div class="theme-font font-xs">
													<span>故障定位器：1548</span>
											<br>
											<span>距离：1263.739</span>									
												</div>
											</div>
										</td>
										<td>
											<p class="line">通信光缆</p>
										</td>
										<td>
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-map-marker" style="font-size: 30px;"></i>
												</div>
												<div class="theme-font font-xs">
													<span>故障定位器：1548</span>
											<br>
											<span>距离：1263.739</span>									
												</div>
											</div>
										</td>
										<td>
											<p class="line">通信光缆</p>
										</td>
										<td>
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-map-marker" style="font-size: 30px;"></i>
												</div>
												<div class="theme-font font-xs">
													<span>故障定位器：1548</span>
											<br>
											<span>距离：1263.739</span>									
												</div>
											</div>
										</td> -->
									</tr>
									<tr v-if="idx != nodes.length - 1">
										<td v-bind:class="{'bl':idx % 2 == 1}"></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td v-bind:class="{'br':idx % 2 == 0}"></td>
									</tr>
									</template>
									<!-- <tr>
										<td>
											
										</td>
										<td>
											
										</td>
										<td>
											
										</td>
										<td>
											
										</td>
										<td>
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-map-marker" style="font-size: 30px;"></i>
												</div>
												<div class="theme-font font-xs">
													<span>故障定位器：1548</span>
											<br>
											<span>距离：1263.739</span>									
												</div>
											</div>
										</td>
										<td>
											<p class="line">通信光缆</p>
										</td>
										<td>
											<div class="text-center">
												<div class="uppercase font-hg theme-font">
													<i class="fa fa-map-marker" style="font-size: 30px;"></i>
												</div>
												<div class="theme-font font-xs">
													<span>故障定位器：1548</span>
											<br>
											<span>距离：1263.739</span>									
												</div>
											</div>
										</td>
									</tr> -->
								</table>
							</div>
						</div>
						<!-- END PORTLET-->
						</div>
						
					</div>
					<div class="col-md-3 col-sm-3">
						<!-- BEGIN PORTLET-->
						<div class="portlet light">
							<div class="portlet-title tabbable-line">
								<div class="caption caption-md">
									<i class="icon-globe theme-font hide"></i>
									<span class="caption-subject theme-font bold uppercase">链路列表</span>
								</div>
							</div>
							<div class="portlet-body">
								<ul class="feeds">
									<li v-for="(el,i) in links" @click="changeLink(i)">
										<a>
											<div class="desc" v-text="el.linkName" v-bind:class="{'link-active':i == idx}"></div>
										</a>
									</li>									
								</ul>
							</div>
						</div>
						<!-- END PORTLET-->
					</div>
				</div>
				
				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
		<!-- END PAGE CONTENT -->
	</div>
</div>
<!-- END PAGE CONTAINER -->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/config.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
/* jQuery(document).ready(function() {    */ 
/*    Metronic.init(); // init metronic core componets
   Layout.init(); // init layout
   Demo.init(); // init demo(theme settings page)
   Index.init(); // init index page
   Tasks.initDashboardWidget(); // init tash dashboard widget */
   let h = $(window).height();
	console.log(h);
	$("#app").height(h);
	$(".page-container").height(h);
	$(".page-content").height(h);
   const {createApp} = Vue;
   const app = createApp({
	data(){
		return {
			idx:0,//选中链路的index,默认为0
			links:[],//链路列表
			nodes:[],//节点列表
			selectedLink:"",
		}
	},
	methods:{
		getNodes(){
			if(this.links.length == 0) return;
			if(this.idx >= this.links.length){
				this.idx = this.links.length - 1;
			}
			try {
				var linkName = this.links[this.idx]['linkName'];
				this.selectedLink = linkName;
				if(!linkName){
					layer.msg("链路名称错误",{icon:1,time:3000});
				}
				axios.post(config.getUrl() + "/getNodes",{linkName}).then(res => {
					console.log(res);
					if(res.status == 200){
						if(res.data.code == 0){
							let list = res.data.data;
							if(list instanceof Array && list.length > 0){
								let firstNode = {nodeId:0,nodeCode:0,nodeType:"机房",distance:0,nodeName:list[0]['nodeName'],stationPort:list[0]['stationPort'],firstNode:true}
								this.nodes = [];
								let arr = []
								let tmp = []
								list.unshift(firstNode);
								for(var i=0;i<list.length;i++){
									tmp = list[i];
									tmp.icon = [];
									if(i == 0){
										tmp.icon.push("fa-cube");
									}else{
										tmp.icon.push("fa-map-marker");
									}
									arr.push(tmp);
									if(i != 0 && (i + 1) % 4 == 0){
										this.nodes.push(arr);
										arr = [];
									}
								}
								if(arr.length > 0){
									let num = 4 - arr.length;
									console.log(num);
									for(var j = 0;j<num;j++){
										arr.push({empty:true});
									}
									this.nodes.push(arr);
								}
								for(let x=0;x<this.nodes.length;x++){
									if(x % 2 == 1){
										this.nodes[x].reverse();
									}
								}
								console.log(this.nodes);
							}else{
								this.nodes = [];
							}
							console.log(this.nodes);
						}else{
							layer.msg("获取节点信息失败"+ res.data.msg,{icon:1,time:3000});
						}
					}else{
						layer.closeAll();
						layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000})
					}
				})
			} catch (error) {
				console.log(error);
			}
		},
		changeLink(num){
			this.idx = num;
			this.getNodes();
		},
	},
	created(){
		layer.load(0,{msg:"努力加载中，请稍后..."})
		try {
			axios.post(config.getUrl() + "/getLinks",{}).then((res) => {
				console.log(res);
				return new Promise((resolve,reject) => {
					if(res.status == 200){
						if(res.data.code == 0){
							layer.closeAll()
							this.links = res.data.data;
							resolve()
						}else{
							layer.closeAll();
							layer.alert("获取链路列表失败，代码为：" + res.data.msg,{icon:1,time:3000});
							reject();
						}
					}else{
						layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
						reject();
					}
				});
			},err => {
				console.log(aa);
			}).then(res => {
				console.log("加载列表成功");
				this.getNodes();
			})
		} catch (error) {
			console.log(error);
			layer.closeAll();
		}
		
	},
   });
   app.mount("#app");

</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>